﻿<template>
  <div class="l-rblock l-form-viewer" style="padding:8px;">
    <el-form
        :model="formData"
        :rules="rules"
        size="mini"
        labelPosition="right"
        labelWidth="80px"
        ref="form">
      <div class="l-auto-window only-tabs">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane class="l-tabs-container" :label="$t('主表信息')" name="tab0">
            <el-row :gutter="0">
              <div class="l-rblock">
                <el-col v-if="lr_formLookAuth('f_FullHead')" :span="24">
                  <el-form-item :label="$t('新闻标题')" prop="f_FullHead">
                    <el-input v-model="formData.f_FullHead" :placeholder="$t('请输入')"/>
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('f_CategoryId')" :span="12">
                  <el-form-item :label="$t('新闻栏目')" prop="f_CategoryId">
                    <l-select :options="f_CategoryOptions" v-model="formData.f_CategoryId"/>
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('f_ReleaseTime')" :span="12">
                  <el-form-item :label="$t('发布时间')" prop="f_ReleaseTime">
                    <l-date format="yyyy-MM-dd HH:mm:ss" dateType="datetime" :clearable="true"
                            v-model="formData.f_ReleaseTime" :placeholder="$t('请选择')"/>
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('f_AuthorName')" :span="12">
                  <el-form-item :label="$t('作者')" prop="f_AuthorName">
                    <el-input v-model="formData.f_AuthorName" :placeholder="$t('请输入')"/>
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('f_CompileName')" :span="12">
                  <el-form-item :label="$t('编辑')" prop="f_CompileName">
                    <el-input v-model="formData.f_CompileName" :placeholder="$t('请输入编辑人员')"/>
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('f_TagWord')" :span="12">
                  <el-form-item :label="$t('Tag标签')" prop="f_TagWord">
                    <el-input v-model="formData.f_TagWord" :placeholder="$t('多个标签用“,”分隔，最多不超过10个')"/>
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('f_Keyword')" :span="12">
                  <el-form-item :label="$t('关键字')" prop="f_Keyword">
                    <el-input v-model="formData.f_Keyword" :placeholder="$t('多个关键字用“,”分隔，最多不超过10个')"/>
                  </el-form-item>
                </el-col>
                <el-col v-if="lr_formLookAuth('f_NewsContent')" :span="24">
                  <el-form-item :label="$t('内容')" prop="f_NewsContent">
                    <l-editor style="height:250px;" v-model="formData.f_NewsContent"
                              :options="{ theme:'snow',placeholder: $t('请输入内容...')}" :rows="15"/>
                  </el-form-item>
                </el-col>
              </div>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'tab0',
      formData: {
        f_CategoryId: "", // 新闻栏目
        f_FullHead: "", // 新闻标题
        f_ReleaseTime: "", // 发布时间
        f_AuthorName: "", // 作者
        f_CompileName: "", // 编辑
        f_TagWord: "", // Tag标签
        f_Keyword: "", // 关键字
        f_NewsContent: "", // 内容
      },
      rules: {
        f_FullHead: [
          {required: true, message: '请输入新闻名称'},
        ],
        f_CategoryId: [{required: true, message: '请输入新闻栏目'},],
        f_ReleaseTime: [{required: true, message: '请输入发布时间'},],
        f_AuthorName: [{required: true, message: '请输入作者'},],
        f_CompileName: [{required: true, message: '请输入编辑人员'},],
      },
    };
  },
  computed: {
    f_CategoryOptions() {
      return [{"value": "1", "label": "国内新闻"},
        {"value": "2", "label": "国际新闻"},
        {"value": "3", "label": "社会新闻"},
        {"label": "体育新闻", "value": '4'},
        {"label": "娱乐新闻", "value": '5'},
        {"label": "科技新闻", "value": '6'},
        {"label": "行业趣闻", "value": '7'},
        {"label": "其他新闻", "value": '8'}]
    },
  },
  mounted() {
  },
  methods: {
    // 重置表单
    resetForm() {
      this.formData.f_NewsId = ''
      this.$refs.form.resetFields()
    },
    // 校验表单
    validateForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          if (valid) {

            resolve(true)
          } else {
            resolve(false)
          }
        })
      })

    },
    // 设置表单数据
    setForm(data) {
      this.formData = data
    },
    // 获取表单数据
    getForm() {
      return this.$deepClone(this.formData)
    }
  }
}
</script>